<button class="btn  btn-primary margin-bottom" ng-click="onAddPlugin()">
    <i class="mdi mdi-plus"></i>
    add new plugin
</button>
<div class="col-md-12 bg-light-grey padding">
    <div class="input-group col-sm-4 pull-left">
        <div class="input-group-addon">
            <i class="mdi mdi-magnify"></i>
        </div>
        <input type="text" data-ng-model="search" class="form-control" placeholder="search plugins...">
    </div>
    <dir-pagination-controls class="pull-right"></dir-pagination-controls>
</div>
<table class="table">
    <tr>
        <th width="1"></th>
        <th width="1"></th>
        <th width="1"></th>
        <th>Name</th>
        <th>Scope</th>
        <th>Apply to</th>
        <th>Created</th>
        <th width="1"></th>
    </tr>
    <tr
            dir-paginate="item in plugins.data | orderBy:'created_at':true | itemsPerPage: 25 | filter : search">
        <td>
            <img ng-src="images/kong/plugins/{{item.name}}.png"
                 onerror="this.src='images/kong/plugins/kong.svg'"
                 style="height: 42px">
        </td>
        <td>

            <i class="mdi mdi-toggle-switch text-success clickable"
               ng-show="item.enabled"
               ng-click="togglePlugin(item)"
               uib-tooltip="Enabled"></i>
            <i class="mdi mdi-toggle-switch-off text-muted clickable"
               ng-show="!item.enabled"
               ng-click="togglePlugin(item)"
               uib-tooltip="Disabled"></i>
        </td>
        <td>
            <raw-view data-item="item"></raw-view>
        </td>
        <th>
            <a href  ng-click="onEditPlugin(item)">
                {{item.name}}
            </a>
        </th>
        <td>{{::getContext(item)}}</td>
        <td>
            <div data-ng-if="item.api.id">
                <a ng-if="!item.api" href class="btn btn-link" data-ng-disabled="item.loading" ng-click="loadEntity(item, 'api', item.api.id)">
                    <i class="mdi" ng-class="item.loading ? 'mdi-loading mdi-spin text-primary': 'mdi-eye-outline'"></i>
                </a>
                <a data-ui-sref="apis.edit({api_id:item.api.id})" style="vertical-align: middle">
                    {{item.api ? item.api.name : item.api.id}}
                </a>

            </div>

            <div data-ng-if="item.service.id">
                <a ng-if="!item.service" href class="btn btn-link" data-ng-disabled="item.loading" ng-click="loadEntity(item, 'service', item.service.id)">
                    <i class="mdi" ng-class="item.loading ? 'mdi-loading mdi-spin text-primary': 'mdi-eye-outline'"></i>
                </a>
                <a data-ui-sref="services.read({service_id:item.service.id})" style="vertical-align: middle">
                    {{item.service.name || item.service.id}}
                </a>


            </div>

            <div data-ng-if="item.route.id">
                <a ng-if="!item.route" href class="btn btn-link" data-ng-disabled="item.loading" ng-click="loadEntity(item, 'route', item.route.id)">
                    <i class="mdi" ng-class="item.loading ? 'mdi-loading mdi-spin text-primary': 'mdi-eye-outline'"></i>
                </a>
                <a data-ui-sref="routes.read({route_id:item.route.id})" style="vertical-align: middle">
                    {{item.route.name || item.route.id}}
                </a>

            </div>


            <span data-ng-if="!item.api.id && !item.service.id && !item.route.id" > All Entrypoints </span>
        </td>
        <td>{{item.created_at * 1000 | date : format : timezone}}</td>

        <td>
            <button class="btn btn-link btn-danger" ng-click="deletePlugin(item)">
                <i class="mdi mdi-delete"></i>
                delete
            </button>
        </td>
    </tr>
    <tr data-ng-if="plugins.data.length === 0">
        <td colspan="100%" class="text-center text-muted">
            <em>no data found...</em>
        </td>
    </tr>
</table>